<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>
<script type="text/javascript" src="org.wattdepot.gdata.GDataLoader.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.makahiki.Timestamp.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.makahiki.BarChart.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.kukuicup.Configuration.js"></script>

 
<script type="text/javascript">
// Wrap this code in an anonymous self-invoking function to avoid polluting global namespace.
(function() {
  // Get the configuration instance with access to kukuicup data.
  var configuration = new org.wattdepot.gdata.kukuicup.Configuration();
  // A spreadsheet containing dorm energy data.
  var spreadsheetURL = configuration.getCumulativeEnergyDataUrl();
  // How frequently we want this spreadsheet data to be refreshed in the visualization.
  var refreshInterval = 3600; 
  // Load the visualization API and the spreadsheet data, then call displayDormData.
  var loader = new org.wattdepot.gdata.GDataLoader(displayDormData, spreadsheetURL, refreshInterval);  
      
  // Display the bar chart.
  function displayDormData(datatable) {
    // Set up the parameters for the BarChart, then display it.

    var rows = [configuration.getCumulativeEnergyDataRow(configuration.ilima),
		configuration.getCumulativeEnergyDataRow(configuration.lehua),
		configuration.getCumulativeEnergyDataRow(configuration.mokihana)];
    var columns = [0,4];

    var title = 'Energy Usage since 5/25/2010';
    var units = 'watt-hours';
    var barChart = new org.wattdepot.gdata.makahiki.BarChart(configuration);
    // Set all configuration parameters to default values (for documentation purposes).
    barChart.draw(datatable, rows, columns, 'chart_div', title, units);

    // Apply standard formatting to the timestamp, then display it.
    var tstampFormatter = new org.wattdepot.gdata.makahiki.Timestamp();
    var timestampDiv = document.getElementById('chart_timestamp_div');
    tstampFormatter.format(datatable, 5, timestampDiv);
    timestampDiv.innerHTML = datatable.getFormattedValue(5, 5);                          
    timestampDiv.style.textAlign = "center";
    timestampDiv.style.width = configuration.barChartWidth;
    var chartDiv = document.getElementById('chart');
    chartDiv.style.backgroundColor = configuration.widgetBackgroundColor;
    chartDiv.style.width = configuration.barChartWidth;
    chartDiv.style.color = configuration.widgetHeaderColor;
    chartDiv.style.fontFamily = configuration.fontFamily;
  }
})();
</script>
</head>

<body>
  <div id="chart">
    <div id="chart_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
    <div id="chart_timestamp_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  </div>
</body>
</body>
</html>


